/* bg colors */
.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-light {
  background-color: var(--light) !important;
}

.bg-dark {
  background-color: var(--dark) !important;
}

/* border colors */
.border-primary {
  border-color: var(--primary) !important;
}

.border-secondary {
  border-color: var(--secondary) !important;
}

.border-light {
  border-color: var(--light) !important;
}

.border-dark {
  border-color: var(--dark) !important;
}

/* text colors */
.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.text-light {
  color: var(--light) !important;
}

.text-dark {
  color: var(--dark) !important;
}

/* font-weight */
.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

.fw-1000 {
  font-weight: 1000;
}

/* card */
.card {
  border-radius: 8px;
}

.card-header:first-child {
  border-radius: 8px 8px 0 0;
}

.row-gap-1 {
  row-gap: 5px;
}

.row-gap-2 {
  row-gap: 10px;
}

.row-gap-3 {
  row-gap: 15px;
}

.row-gap-4 {
  row-gap: 20px;
}

.row-gap-5 {
  row-gap: 30px;
}

.column-gap-1 {
  column-gap: 5px;
}

.column-gap-2 {
  column-gap: 10px;
}

.column-gap-3 {
  column-gap: 15px;
}

.column-gap-4 {
  column-gap: 20px;
}

.column-gap-5 {
  column-gap: 30px;
}

.align-items-inherit {
  align-items: inherit !important;
}

.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.btn-primary-dark {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--white);
}

.btn-primary-dark:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
}

.btn-secondary:hover {
  background-color: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.btn-dark {
  background-color: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}

.btn-dark:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}